<!-- https://blog.csdn.net/ss_Tina/article/details/128312263
    参考博客
-->

<template>
  <div class="app-container">
    <div class="data-box">
      <van-row class="th-row" style="width: 2000px;">
        <van-col class="th-row2" v-for="(item, index) in Params" :key="index" style="">{{ item.Name }}</van-col>
      </van-row>
      <van-row class="td-row" :style="{ background: index % 2 == 0 ? '#fff' : '#ffcccc' }" v-for="(item, index) in values" :key="index">
        <!-- <van-col v-for="(item2, index) in item" :key="index" class="common-ellipsis"  @click="showContent(item.workerNo)">{{ item.workerNo }}</van-col> -->
        <van-col v-for="(item2, index) in item" :key="index" class="th-row2"  @click="showContent(item2)">{{ item2 }}</van-col>
      </van-row>
    </div>
    <van-popup v-model="showPopup" class="hidden-wrap">
      <van-row class="hidden-content">{{ ellContent }}</van-row>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "vantTable",
  filters: {
    dateFormat: function (val) {
      //省略......
      return val;
    }
  },
  data() {
    return {
      isCheckAll: false,
      showPopup: false, // 显示省略的内容
      ellContent: "", // 省略的内容
      Params:[],
      Value:'',
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#F5F5F5",//滚动条颜色
          opacity: 0.5,//滚动条透明度
          // "overflow-y": "hidden" //使用横向滚动 竖向就是"overflow-x": "hidden"
          "overflow-x": "hidden" //使用横向滚动 竖向就是"overflow-x": "hidden"
        }
      },
      values:[]
    };
  },
  created() {
    let value=this.$route.query.value
    this.Params=this.$route.query.params
    let reg = /\\/g;
    let replaceAfter = JSON.parse(value.replace(reg,''));
    replaceAfter.forEach(element => {
        this.values.push(Object.values(element))
    });
    
  },
  methods: {
    // 显示省略的内容
    showContent(content, type) {
      if (content == "") {
        return;
      } else {
        if (type == 1) {
          var format = this.$options.filters['dateFormat'];
          //日期通过过滤器格式化一下
          this.ellContent = format(content)
        } else {
          this.ellContent = content;
        }
        this.showPopup = true;
      }
    },
    checkAll() {
      if (!this.isCheckAll) {
        this.$refs.checkboxGroup.toggleAll(true);
        this.isCheckAll = true;
      } else {
        this.$refs.checkboxGroup.toggleAll();
        this.isCheckAll = false;
      }
    },
    onSearch() {

    },
    cLearSearch() {

    },
    checkChange() {

    },

  },
};
</script>

<style lang="less" scoped>
.th-row2{
    width: 180px;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid #000;
    text-align: center;
}
.data-box {
  font-size: 13px;
  margin: 12px 0px;
  border: 1px solid #fd7273;
  overflow: auto;

  .th-row {

    height: 30px;
    line-height: 30px;
    padding: 0px 12px;
    background: #fd7273;
  }

  .td-row {
    width: 2000px;
    height: 30px;
    line-height: 30px;
    padding: 0px 12px;
  }

}

// 超出 1 行显示省略号


// 滚动条位置 --展示的是竖向
// /deep/.__bar-is-vertical {
// right: -1px !important;
// }
// // 隐藏横向滚动条
// /deep/.__bar-is-horizontal {
// display: none !important;
// }

// 滚动条位置 --展示横向
/deep/.__bar-is-vertical {
  display: none !important;
}

// 隐藏横向滚动条
/deep/.__bar-is-horizontal {
  bottom: -1px !important;
}
</style>